<template>
	<view>
		<u-navbar back-text="返回" :backTextStyle="backTextColor" backIconColor="#fff" :background="background">
			<view style="text-align: center; width: 100%;">
				<text class="nav-title">{{itemTitle}}</text>
			</view>
			<view class="navbar-right" slot="right">
				<view class="right-item">
					<u-icon name="chat" size="38"></u-icon>
					<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
				</view>
				<view class="right-item">
					<u-icon name="setting" size="38"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="home">
			<u-time-line ref="timeline" :pending="loading">
			  <u-time-line-item 
				v-for="(item, index) in records" 
				:key="index"
				:id="`record-${index}`"
			  >
			  
			  <!-- 此处自定义了左边内容，用一个图标替代 -->
			  <template v-slot:node v-if="index === 0">
			      <view class="u-node" style="background: #19be6b;">
			          <!-- 此处为uView的icon组件 -->
			          <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
			      </view>
			  </template>
			
			  <template slot="content">
				  <view class="record-item">
					<view class="record-header">
					  <text class="device-name">{{ item.mydeviceName }}</text>
					  <u-tag 
						:text="getStatusText(item.newStatusText)" 
						:type="getStatusType(item.newStatusText)"
						size="default"
					  />
					</view>
					<view class="record-content">
					  <text class="description">通知：{{ item.informedPhoneNumber }}</text>
					  <text class="time">{{ formatTime(item.statusChangeTime) }}</text>
					</view>
				  </view>
				</template>
			  </u-time-line-item>
			</u-time-line>
			
			<u-loadmore 
			  :status="loadStatus" 
			  @loadmore="loadMore"
			  v-if="records.length > 0"
			/>
			
			<u-empty 
			  v-if="records.length === 0 && !loading" 
			  text="No records found" 
			  mode="list" 
			/>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      records: [],
      loading: true,
      loadStatus: 'loadmore', // loadmore, loading, nomore
      page: 1,
      pageSize: 10,
      hasMore: true,
      statusMap: {
        'led_ON': { text: '运行中', type: 'success' },
        'led_OFF': { text: '已停止', type: 'error' },
        'maintenance': { text: 'Maintenance', type: 'warning' },
        'error': { text: 'Error', type: 'error' }
      },
	  background: this.TopColor,
	  backTextColor: {
	  	'color': '#ffffff'
	  },
	  actionStyle:{
	  	'color':'#FC0099',
	  },
	  itemTitle: "",
    }
  },
  
  onLoad(e) {
  	this.itemTitle = e.title;
  },
  mounted() {
    this.loadData()
  },
  
  methods: {
    async loadData() {
      if (!this.hasMore) return
      
      this.loading = true
      this.loadStatus = 'loading'
      
      try {
		  
		  await this.$api.post("/kim/toMyDeviceStatusPage.action",{"RowStart":0+(this.page - 1) * this.pageSize,"RowSize":this.pageSize}).then(response => {
			  console.log(response)
			  if (response && response.data) {
			    // For first page, replace data; for subsequent pages, append
			    if (this.page === 1) {
			      this.records = response.data
			    } else {
			      this.records = [...this.records, ...response.data]
			    }
			    
			    // Check if there's more data
			    this.hasMore = response.data.length === this.pageSize
			    this.loadStatus = this.hasMore ? 'loadmore' : 'nomore'
			  } else {
			    this.loadStatus = 'nomore'
			    this.hasMore = false
			  }
		  });
        // // Replace with your actual API endpoint
        // const response = await this.$u.api.getDeviceStatusRecords({
        //   page: this.page,
        //   pageSize: this.pageSize
        // })
        
        
      } catch (error) {
        console.error('Failed to load records:', error)
        this.loadStatus = 'loadmore'
        uni.showToast({
          title: 'Failed to load data',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    loadMore() {
      if (this.loadStatus === 'loading' || !this.hasMore) return
      
      this.page++
      this.loadData()
    },
    
    getStatusText(status) {
      return this.statusMap[status]?.text || status
    },
    
    getStatusType(status) {
      return this.statusMap[status]?.type || 'info'
    },
    
    formatTime(timestamp) {
      return this.$u.timeFormat(timestamp, 'yyyy-mm-dd hh:MM:ss')
    },
    
    refresh() {
      this.page = 1
      this.hasMore = true
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}

.record-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-left: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.device-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.record-content {
  display: flex;
  flex-direction: column;
}

.description {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 10rpx;
}

.time {
  font-size: 24rpx;
  color: #999999;
}
.title{
		font-size: 32rpx;
		font-weight: bold;
		color: #FC0099;
	}
	.tag{
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.nav-title{
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		display: flex;
		justify-content: center;
	}
</style>